<template>
  <div :sel-id="selId" :options="options" :selected-opts="selectedOpts" :value-id="valueId">
    <el-button @click="selectAll">全选</el-button>
    <el-button @click="selectReverse">反选</el-button>
    <el-button @click="clearAll">清空</el-button>
  </div>
</template>

<script>
export default ({
  name: 'SelectBtns',
  props: {
    options: {
      type: Array,
      default: () => { return [] }
    },
    selectedOpts: {
      type: Array,
      default: () => { return [] }
    },
    valueId: {
      type: String,
      default: ''
    }
  },
  data() {

  },
  methods: {
    // 全选
    selectAll() {
      this.selectedOpts = this.options.map(val => { return val[this.valueId] })
    },
    // 反选
    selectReverse() {
      if (this.selectedOpts.length === 0) {
        this.selectAll(this.options, this.selectedOpts)
      } else {
        const temp = JSON.parse(JSON.stringify(this.selectedOpts))
        const allopt = this.options.map(val => { return val[this.valueId] })
        this.selectedOpts = this.getArrDifference(temp, allopt)
      }
    },
    // 清空
    clearAll() {
      this.selectedOpts = []
    },
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function(v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v)
      })
    }
  }
})
</script>

<style lang="scss">
  .sel-btns {
    display: flex;
    .el-button {
      flex: 1;
      color: #fff;
      &:hover{
        color: #0095e3;
      }
    }
  }
</style>
